<template>
	<view>
		<div style="height: 96rpx; display: flex;justify-content: space-between;align-items: flex-end;background-color: rgba(255, 255, 255, 1);">
			<div v-for="(item, index) in title" :key="index" style="text-align: center;width: 33%;" @click="changeclass(index)">
				<div style="margin-bottom: 20rpx;">{{ item.title }}</div>
				<div :class="{ color: item.bottom }" style="width: 66rpx;height: 8rpx;margin: 0rpx auto;"></div>
			</div>
		</div>
		<div class="bigbox">
			<div v-for="(item, index) in data" style="display: flex;" :class="{ move: item.deleate }">
				<div class="smallbox" :key="index">
					<div style="display: flex;justify-content: space-between;align-items: center;">
						<div style="width: 100%;display: flex;justify-content: flex-start;align-items: center;">
							<div class="imgbox">
								<img
									:src="item.url"
									alt=""
									style="width: 32px;
		height: 32px;"
								/>
							</div>
							<span style="margin-left: 26rpx; color: rgba(56, 56, 56, 1);font-size: 28rpx;font-weight: bold;">{{ item.name }}</span>
							<span style="margin-left: 26rpx; color: rgba(56, 56, 56, 1);font-size: 28rpx;font-weight: bold;">{{ item.class }}</span>
						</div>
						<span v-if="!item.minute" :class="{ colorchange: item.statecolor }" style="width: 300rpx; text-align: right; font-size: 28rpx;color: rgba(166, 166, 166, 1);">{{ item.statetext }}</span>
						<span v-if="item.minute" :class="{ colorchange: item.statecolor }" style="width: 300rpx; text-align: right; font-size: 28rpx;color: rgba(166, 166, 166, 1);font-weight: bold;">{{ item.statetext }}</span>
					</div>
					<div class="hospitalbox">
						<span class="title">开始时间</span>
						<span>{{ item.time }}</span>
						<br />
						<div style="display: flex;justify-content: flex-start;">
							<span class="title">服务周期</span>
							<span style="width:70%;height:100rpx;overflow: hidden ;">{{ item.opinion }}</span>
						</div>
					</div>
					<div class="button">
						<div @click="changedeleate(index)">删除订单</div>
						<div v-if="item.state == 2" class="evaluate">评价</div>
						<div v-if="item.state == 4" class="hasevaluate">已评价</div>
						<div v-if="item.state == 1">已完成</div>
						<div v-if="item.state == 3">重新下单</div>
						<div v-if="item.state == 0">去支付</div>
					</div>
				</div>
				<div v-if="item.deleate" class="deleate">删除</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: [
					{
						title: '全部',
						bottom: true,
						class: 0
					},
					{
						title: '待支付',
						bottom: false,
						class: 1
					},
					{
						title: '服务中',
						bottom: false,
						class: 2
					},
					{
						title: '已完成',
						bottom: false,
						class: 3
					},
					{
						title: '已取消',
						bottom: false,
						class: 4
					}
				],
				data: [
					{
						detial: false,
						url: require('../asset/myopinion.svg'),
						name: '王凤霞陪护诊疗机构',
						state: 0,
						statetext: '',
						statecolor: '',
						opinion: '5天',
						time: '2021-12-16 13:00-13:30',
						deleate: false
					},
					{
						detial: false,
						url: require('../asset/myopinion.svg'),
						name: '于珠珠',
						state: 0,
						statetext: '',
						statecolor: '',
						opinion: '5天',
						time: '2021-12-16 13:00-13:30',
						deleate: false
					},
					{
						detial: false,
						url: require('../asset/myopinion.svg'),
						name: '于珠珠',
						state: 0,
						statetext: '',
						statecolor: '',
						opinion: '5天',
						time: '2021-12-16 13:00-13:30',
						deleate: false
					}
				],
				data1: [
					{
						detial: false,
						url: require('../asset/myopinion.svg'),
						name: '王凤霞陪护诊疗机构',
						state: 0,
					statetext: '',
					statecolor: '',
					opinion: '5天',
					time: '2021-12-16 13:00-13:30',
						deleate: false,
						minute: 14,
						second: 59,
						istime: 1
					},
					{
						detial: false,
						url: require('../asset/myopinion.svg'),
						name: '于珠珠',
						state: 1,
						statetext: '',
						statecolor: '',
						opinion: '5天',
						time: '2021-12-16 13:00-13:30',
						deleate: false
					},
					{
						detial: false,
						url: require('../asset/myopinion.svg'),
						name: '于珠珠',
						state: 2,
						statetext: '',
						statecolor: '',
						opinion: '5天',
						time: '2021-12-16 13:00-13:30',
						deleate: false
					},
					{
						detial: false,
						url: require('../asset/myopinion.svg'),
						name: '于珠珠',
						state: 3,
						statetext: '',
						statecolor: '',
						opinion: '5天',
						time: '2021-12-16 13:00-13:30',
						deleate: false
					},
					{
						detial: false,
						url: require('../asset/myopinion.svg'),
						name: '于珠珠',
						state: 4,
						statetext: '',
						statecolor: '',
						opinion: '5天',
						time: '2021-12-16 13:00-13:30',
						deleate: false
					}
				]
			}
		},
		created() {
				this.changeclass(0);
		},
		methods: {
			changeclass(index) {
				this.title.forEach(item => {
					item.bottom = false;
				});
				this.title[index].bottom = true;
				this.data.forEach(item => {
					item.deleate = false;
				});
				if (index == 1) {
					let dataarr = [];
					this.data1.forEach(item => {
						if (item.state == 0) {
							item.statecolor = true;
							dataarr.push(item);
						} else {
						}
					});
					this.data = dataarr;
				} else if (index == 2) {
					let dataarr = [];
					this.data1.forEach(item => {
						if (item.state == 1) {
							dataarr.push(item);
						} else {
						}
					});
					this.data = dataarr;
				} else if (index == 3) {
					let dataarr = [];
					this.data1.forEach(item => {
						if (item.state == 2) {
							dataarr.push(item);
						} else {
						}
					});
					this.data = dataarr;
				} else if (index == 4) {
					let dataarr = [];
					this.data1.forEach(item => {
						if (item.state == 3) {
							dataarr.push(item);
						} else {
						}
					});
					this.data = dataarr;
				} else {
					this.data = this.data1;
					this.data.forEach(item => {
						if (item.state == 0) {
							item.statecolor = true;
							let timer = setInterval(() => {
								item.statetext = '待支付 ' + item.minute + ':' + item.second;
								item.istime = 0;
								item.second--;
								if (item.second == 0 && item.minute != 0) {
									item.minute--;
									item.second = 59;
								} else if (item.minute == 0 && item.second == 0) {
									clearInterval(timer);
								} else if (item.second < 10 && item.second > 0) {
									item.second = '0' + item.second;
								}
							}, 1000);
							if (item.istime == 1) {
								timer;
							}else{
								clearInterval(timer)
							}
						} else if (item.state == 1) {
							item.statetext = '服务中';
							item.statecolor = true;
						} else if (item.state == 2) {
							item.statetext = '已完成';
							item.statecolor = false;
						} else if (item.state == 3) {
							item.statetext = '已取消';
							item.statecolor = false;
						} else if (item.state == 4) {
							item.statetext = '已完成';
							item.statecolor = false;
						}
					});
				}
			},
			changedeleate(index) {
				this.data.forEach(item => {
					item.deleate = false;
				});
				this.data[index].deleate = true;
			},
		}
	}
</script>

<style>
.color {
	background-color: rgba(65, 171, 133, 1);
}
.smallbox {
	width: 100%;
	padding: 20rpx;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 6px;
	margin-top: 20rpx;
}
.bigbox {
	padding: 0 20rpx;
	overflow-y: hidden;
}
.imgbox {
	width: 39px;
	height: 39px;
	background-color: rgba(65, 171, 133, 1);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.button {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}
.button div {
	width: 176rpx;
	height: 64rpx;
	border: rgba(166, 166, 166, 1) 1px solid;
	border-radius: 32rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 46rpx;
}
.button div {
	margin-right: 20rpx;
}
.button div:last-child {
	background-color: rgba(65, 171, 133, 1);
	color: rgba(255, 255, 255, 1);
	margin-right: 0;
}
.hospitalbox {
	margin-top: 40rpx;
}
.hospitalbox span {
	margin-left: 28rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: rgba(56, 56, 56, 1);
}
.hospitalbox .title {
	font-weight: normal;
	color: rgba(128, 128, 128, 1);
	margin-left: 0;
}
.colorchange {
	color: rgba(65, 171, 133, 1) !important;
}
.move {
	margin-left: -30%;
}
.deleate {
	width: 20%;
	margin-top: 20rpx;
	margin-left: 20rpx;
	background-color: rgba(212, 48, 48, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgba(255, 255, 255, 1);
	font-size: 32rpx;
	font-weight: bold;
}
.hasevaluate {
	background-color: rgba(255, 255, 255, 1) !important;
	border: rgba(65, 171, 133, 1) solid 2rpx !important;
	color: rgba(65, 171, 133, 1) !important;
}
.evaluate {
	background-color: rgba(255, 255, 255, 1);
	border: rgba(65, 171, 133, 1) solid 2rpx !important;
	color: rgba(65, 171, 133, 1);
}
</style>
